<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String base = request.getContextPath();
    request.setAttribute("base", base);
    response.setCharacterEncoding("utf-8");
    //no cache
    response.setHeader("Cache-Control","no-store");
    response.setHeader("Pragrma","no-cache");
    response.setDateHeader("Expires",0);
%>
<!doctype html>
<html lang="zh" class="pu">

<head>
    <!-- meta -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <!-- no cache -->
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">

    <!-- style -->
    <style>
        .divlink {
            width:86%;
            margin-left: 7%;
            border-bottom: solid 1px #BBB;
            text-align: center;;
        }
        .divlink span {
            color:#0099FF;
        }
        .divpackage {
            border: solid 1px #DDD;
            float: left;
        }
        .divpkdmdiv {
            width: 26%;
            margin-left: 37%;
            margin-top: 10%;
        }
        .divpkdmnum {
            text-align: center;
            color: #888;
        }
        .divpkdmcost {
            text-align: center;
            color: #BBB;
        }
        .reddiamond {
            width: 100%;
            height: 100%;
        }
        .whitediamond {
            width: 100%;
            height: 100%;
            display: none;
        }
    </style>

    <title>充值</title>
</head>

<body style="padding: 0px;margin: 0px; display: none;">
<!-- 菲遇账户 -->
<div id="div_tlt" style="width: 60%;margin-left: 20%;color: #BBB;padding-top: 5%;padding-bottom: 1%;text-align:center;">菲遇账户</div>
<div id="div_userinfo" style="width: 60%;margin-left: 20%;color: #333;padding-bottom: 1%;text-align:center;">${nick}（${rfid}）</div>
<div id="div_link" class="divlink">
    <div style="font-size:0px;margin-bottom: 2%;">
        <span id="span_link1" style="padding-right: 5%;border-right: solid 1px #BBB;">更换账户</span>
        <span id="span_link2" style="padding-left: 5%;">充值记录</span>
    </div>
</div>
<div id="div_rem" style="width: 60%;margin-left: 20%;color: #BBB;padding-top: 2%;text-align:center;">钻石余额</div>
<div id="div_diamond" style="width: 60%;margin-left: 20%;color: #FF5A5F;text-align:center;">${diamond}</div>

<!-- 充值套餐 -->
<div style="width: 98%;margin-left: 1%;margin-top: 5%">
    <c:forEach items="${events}" var="event" varStatus="us">
        <div id="event${event.price}" onclick="selectPackage(${event.price}, ${event.eventid})" class="divpackage">
            <div class="divpkdmdiv">
                <img class="reddiamond" src="${base}/resources/images/diamond_red.png">
                <img class="whitediamond" src="${base}/resources/images/diamond_white.png">
            </div>
            <div class="divpkdmnum">${event.price * 10}</div>
            <div class="divpkdmcost">${event.price}元</div>
        </div>
    </c:forEach>
</div>

<!-- 底部信息 -->
<div id="div_blank" style="width: 100%;height:10%;clear:both;"></div>
<div id="div_foo" style="width: 100%;margin-top: 10%;">
    <div id="div_recharge" style="border-radius:5px; width: 90%;margin-left: 5%;background: #FF5A5F;color:#FFF;text-align: center;padding-top: 3%;padding-bottom: 2.5%;">立即充值</div>
</div>

<!-- js -->
<script src="${base}/resources/js/zepto.min.js"></script>
<script src="${base}/resources/js/cookie_hold.js"></script>
<script src="${base}/resources/js/waiting.js?786896721"></script>
<script src="${base}/resources/js/checkstate.js?568975845"></script>
<script src="${base}/resources/js/string_hold.js?5689758223"></script>
<script src="${base}/resources/js/md5.js?5689758453407"></script>
<script src="${base}/resources/js/jweixin-1.0.0.js"></script>

<script>
    var stopOper = true;
    var selPrice = -1;
    var selEvent = -1;
    $(document).ready(function(){
        //检查用户登录状态
        var uid = '${uid}';
        if (uid == '' || uid == null) {
            location.href = "${base}/common/login.htm?from=recharge/index.htm&title=" + encodeURI(encodeURI("充值"));
            return;
        }
        else {
            var env = '${env}';
            if (uid == '123456' && env != 'dev') {
                location.href = "${base}/common/login.htm?from=recharge/index.htm&title=" + encodeURI(encodeURI("充值"));
                return;
            }
        }

        //允许操作
        stopOper = false;

        //操作-充值
        $('#div_recharge').click(function() {
            if (selEvent == -1) {
                showInfo (null, "请先选择充值金额", "50");
                return;
            }
            prepay ();
        });

        //切换账户
        $('#span_link1').click(function() {
            logout();
        });

        //领取记录
        $('#span_link2').click(function() {
            location.href = "${base}/recharge/list.htm?uid=${uid}&pagesize=20&etype=${etype}";
        });

        //计算显示尺寸
        countRect();
        $(window).resize(function () {
            countRect();
        });
        //显示内容
        $('body').show ();
    });

    function logout () {
        location.href = "${base}/common/login.htm?from=recharge/index.htm&title=" + encodeURI(encodeURI("充值"));
    }

    function selectPackage (price, eventid) {
        //取消已选中
        if (selPrice != -1) {
            $('#event' + selPrice).css('background', 'rgba(0,0,0,0)');
            $('#event' + selPrice + ' .divpkdmnum').css('color', '#888');
            $('#event' + selPrice + ' .whitediamond').hide ();
            $('#event' + selPrice + ' .reddiamond').show ();
        }
        //选中状态
        $('#event' + price).css('background', '#FF5A5F');
        $('#event' + price + ' .divpkdmnum').css('color', '#FFF');
        $('#event' + price + ' .whitediamond').show ();
        $('#event' + price + ' .reddiamond').hide ();
        selPrice = price;
        selEvent = eventid;
    }

    //
    function prepay () {
        ////创建请求标识信息
        var openid = "${openid}";
        var uid = '${uid}';
        var timestamp = new Date().getTime() + "";
        var sign = hex_md5(openid + uid + timestamp);
        //请求
        operLock = true;
        $.waiting.show('请稍候...');

        $.post("${base}/recharge/prepay.htm?openid=" + openid + "&uid=" + uid + "&tstamp=" + timestamp + "&sign=" + sign +"&eventid=" + selEvent, {}, function(data) {
            if(data.return_code != 'FAIL'){
                //微信接口配置
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appId, // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名，见附录1
                    jsApiList: ["checkJsApi", "chooseImage", "chooseWXPay"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
                //设置支付参数
                var params={
                    timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
                    package: "prepay_id=" + data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                    signType:data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    paySign: data.paySign, // 支付签名
                    success: function (res) {
                        window.location = "${base}/recharge/success.htm";
                    },
                    error:function(res){
                        alert("支付失败：" + res);
                    }
                };

                /*等待X秒自动支付*/
                window.setTimeout(autoPay (params), 1000);
            }
            else {
                alert (data.return_msg);
                $.waiting.hide ();
            }
        }, 'json');
    }
    
    function autoPay(params) {
        $.waiting.hide ();
        wx.chooseWXPay(params);
    }

    //提示信息
    function showInfo (foc, msg, top) {
        $.tips (msg, top + "%");
        if (foc != null && foc != '') $('#' + foc).focus();
    }

    //尺寸计算
    function countRect () {
        //
        if($(':focus').length != 0) return;

        //
        var ww,fsz;
        ww = parseInt ($(window).width());
        fsz = ww * 0.04;
        //菲遇账户
        $('#div_tlt').css('font-size', fsz);
        $('#div_userinfo').css('font-size', fsz);
        $('#div_link span').css('font-size', fsz);
        $('#div_rem').css('font-size', fsz);
        $('#div_diamond').css('font-size', fsz * 3);
        //套餐
        var pw = (ww * 0.98 - 6) / 3;
        $('.divpackage').css('width', pw);
        $('.divpackage').css('height', pw * 0.85);
        $('.divpkdmdiv').css('height', pw * 0.26);
        $('.divpkdmnum').css('font_size', fsz * 1.5);
        $('.divpkdmcost').css('font-size', fsz * 0.8);
        //底部
        $('#div_get').css('font-size', fsz * 1.1);
        $('#div_tip').css('font-size', fsz);
    }
</script>

</body>
</html>